<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">
            <el-col>
                <div class="grid-content bg-purple">
                    <div class="dlblock-mb20 mb10">
                        <span class="pr5">模板名称</span>
                        <el-input v-model="schedulingTemplate" style="width: 150px"
                                  placeholder="请输入"></el-input>
                    </div>
                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">姓名</span>
                        <el-input v-model.trim="name" size="medium" placeholder="请输入姓名" style="width: 150px;"
                                  :maxlength="10"
                                  show-word-limit clearable></el-input>
                    </div>
                    <div class="dlblock-mb20 ml10">
                        <span class="pr5">线路名称</span>
                        <el-select v-model="line" style="width: 150px" clearable>
                            <el-option v-for="(item, index) in lineList" :key="index" :label="item.routeName"
                                       :value="item.routeId">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="dlblock-mb20 ml10">
                        <span class="pr5">分组名称</span>
                        <el-cascader
                                v-model="group"
                                :options="groupTree"
                                :props="{value: 'orgId', label: 'orgName', checkStrictly: true,expandTrigger:'hover'}"
                                style="width: 150px;"
                                :show-all-levels="false"
                                @change="groupChange"
                                clearable>
                        </el-cascader>
                    </div>

                    <div class="dlblock-mb20 ml10">
                        <span class="pr5">班别</span>
                        <el-select style="width: 140px" v-model="shiftType"
                                   placeholder="全天班">
                            <el-option label="早班" value="1"></el-option>
                            <el-option label="中班" value="2"></el-option>
                            <el-option label="晚班" value="3"></el-option>
                            <el-option label="全天班" value="0"></el-option>
                        </el-select>
                    </div>
                    <el-form label-width="100px">
                        <el-form-item label="单选">
                            <el-radio v-model="stopFlag" label="0">否</el-radio>
                            <el-radio v-model="stopFlag" label="1">是</el-radio>
                        </el-form-item>
                        <el-form-item label="多选">
                            <el-checkbox class="ml20" v-model="editSelect1">编辑上下联动</el-checkbox>
                            <el-checkbox v-model="editSelect2">编辑前后联动</el-checkbox>
                        </el-form-item>
                    </el-form>
                    <br>
                    <div class="dlblock-mb20 ml10">
                        <span class="pr5">查询日期</span>
                        <el-time-select
                                style="width: 140px"
                                v-model="time"
                                :picker-options="{
                                        start: '05:30',
                                        step: '00:05',
                                        end: '17:30'
                                      }"
                                placeholder="选择时间">
                        </el-time-select>
                    </div>

                    <div class="dlblock-mb20 ml10">
                        <span class="pr5">查询时间段<span style="color:#ff0000;">✲ </span></span>
                        <el-date-picker
                                style="width: 280px;"
                                v-model="date"
                                type="daterange"
                                :clearable="false"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                align="left"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                    <div class="dlblock-mb20 pr5 pl5">
                        <el-button @click="pages.page = 1; getXXXFn()" class="el-icon-search ml5"
                                   circle>
                        </el-button>
                        <el-button type="primary" @click="editXXX(1)">添加</el-button>
                    </div>
                </div>
            </el-col>
            <el-col :span="24">
                <el-table stripe class="my-table" :data="templateData" v-loading="loading"
                          :header-row-class-name="'my-table-header'" border>
                    <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
                    <el-table-column v-if="false" prop="busShiftTemplateId"></el-table-column>
                    <el-table-column align="center" prop="orgName" label="分组名称"></el-table-column>
                    <el-table-column align="center" prop="routeName" label="线路名称"></el-table-column>
                    <el-table-column align="center" prop="name" label="模板名称"></el-table-column>
                    <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column align="center" label="操作" fixed="right"
                                     width="150">
                        <template slot-scope="{row}">
                            <el-button size="mini" type="primary" @click="editBtn(row)">编辑</el-button>
                            <el-button size="mini" type="primary" @click="delBtn(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <br>
                <el-table
                        class="my-table"
                        :data="tableData" stripe
                        v-loading="loading"
                        :header-row-class-name="'my-table-header'"
                        @selection-change="handleSelectionChange"
                        @row-dblclick="choseRow($event)"
                        ref="myTable"
                        border>
                    <el-table-column type="selection" fixed width="55"></el-table-column>
                    <el-table-column align="center" prop="personId" label="人员ID" v-if="false"></el-table-column>
                    <el-table-column align="center" prop="personName" label="姓名"></el-table-column>
                    <el-table-column align="center" prop="personCode" label="人员编码"></el-table-column>
                    <el-table-column align="center" prop="orgName" label="分组"></el-table-column>
                    <el-table-column align="center" prop="sex" label="性别"></el-table-column>
                    <el-table-column align="center" prop="brithdayString" label="生日"></el-table-column>
                    <el-table-column align="center" prop="postalCode" label="邮政编码"></el-table-column>
                    <el-table-column align="center" prop="email" label="电子邮件"></el-table-column>
                    <el-table-column align="center" prop="workUnit" label="工作单位"></el-table-column>
                    <el-table-column align="center" prop="address" label="地址"></el-table-column>
                    <el-table-column align="center" prop="mobileTel" label="手机电话"></el-table-column>
                    <el-table-column align="center" prop="officeTel" label="办公室电话"></el-table-column>
                    <el-table-column align="center" prop="homeTel" label="家庭电话"></el-table-column>
                    <el-table-column align="center" label="操作" fixed="right">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="editBtn(2, row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="my-pagination">
                    <el-pagination background layout="total, prev, pager, next" :total="pages.total"
                                   :page-size="pages.size"
                                   :current-page="pages.page" @current-change="pageChange">
                    </el-pagination>
                </div>
            </el-col>
        </div>
    </div>
</template>

<script>
    import {getXXX,} from "@/api/"

    export default {
        name: "index",
        data() {
            return {
                loading: false,
                // 必填项提醒
                required: {
                    required: true,
                    message: '此输入框必填',
                    trigger: 'blur'
                },
                pages: {
                    page: 1,
                    total: 0,
                    size: 10
                },
                // 页面相关变量
                group: '',
                groupTree: [
                    {
                        "children": [
                            {
                                "children": null,
                                "orgId": 1025,
                                "orgName": "东至公交",
                                "parentId": 1024
                            }
                        ],
                        "orgId": 1024,
                        "orgName": "池州公交",
                        "parentId": 1
                    },
                    {
                        "children": [
                            {
                                "children": null,
                                "orgId": 1027,
                                "orgName": "滦平公交",
                                "parentId": 1026
                            }
                        ],
                        "orgId": 1026,
                        "orgName": "承德公交",
                        "parentId": 1
                    },
                    {
                        "children": [
                            {
                                "children": null,
                                "orgId": 4,
                                "orgName": "长丰公交",
                                "parentId": 2
                            },
                            {
                                "children": null,
                                "orgId": 1004,
                                "orgName": "肥西公交",
                                "parentId": 2
                            },
                            {
                                "children": [
                                    {
                                        "children": null,
                                        "orgId": 1031,
                                        "orgName": "东城车队",
                                        "parentId": 1023
                                    },
                                    {
                                        "children": null,
                                        "orgId": 1032,
                                        "orgName": "东鼎车队",
                                        "parentId": 1023
                                    }
                                ],
                                "orgId": 1023,
                                "orgName": "肥东公交",
                                "parentId": 2
                            }
                        ],
                        "orgId": 2,
                        "orgName": "合肥公交",
                        "parentId": 1
                    },
                    {
                        "children": [
                            {
                                "children": null,
                                "orgId": 1005,
                                "orgName": "怀宁公交",
                                "parentId": 3
                            },
                            {
                                "children": null,
                                "orgId": 1006,
                                "orgName": "望江公交",
                                "parentId": 3
                            },
                            {
                                "children": null,
                                "orgId": 1007,
                                "orgName": "宿松公交",
                                "parentId": 3
                            },
                            {
                                "children": null,
                                "orgId": 1011,
                                "orgName": "潜山公交",
                                "parentId": 3
                            },
                            {
                                "children": null,
                                "orgId": 1012,
                                "orgName": "太湖公交",
                                "parentId": 3
                            },
                            {
                                "children": null,
                                "orgId": 1015,
                                "orgName": "太湖公交",
                                "parentId": 3
                            }
                        ],
                        "orgId": 3,
                        "orgName": "安庆公交",
                        "parentId": 1
                    },
                    {
                        "children": [
                            {
                                "children": null,
                                "orgId": 1017,
                                "orgName": "固镇公交",
                                "parentId": 1018
                            }
                        ],
                        "orgId": 1018,
                        "orgName": "蚌埠公交",
                        "parentId": 1
                    },
                    {
                        "children": [
                            {
                                "children": null,
                                "orgId": 1003,
                                "orgName": "寿县公交",
                                "parentId": 1019
                            }
                        ],
                        "orgId": 1019,
                        "orgName": "淮南公交",
                        "parentId": 1
                    },
                    {
                        "children": null,
                        "orgId": 1020,
                        "orgName": "宿州公交",
                        "parentId": 1
                    },
                    {
                        "children": [
                            {
                                "children": null,
                                "orgId": 1022,
                                "orgName": "临泉公交",
                                "parentId": 1021
                            }
                        ],
                        "orgId": 1021,
                        "orgName": "阜阳公交",
                        "parentId": 1
                    }
                ],
                schedulingTemplate: '',
                name: '',
                line: '',
                lineList: [
                    {
                        "routeId": 7,
                        "routeName": "寿县5路"
                    },
                    {
                        "routeId": 666,
                        "routeName": "灵璧2路"
                    },
                    {
                        "routeId": 1005,
                        "routeName": "肥西1路"
                    },
                    {
                        "routeId": 1006,
                        "routeName": "肥西2路"
                    },
                    {
                        "routeId": 1007,
                        "routeName": "肥西3路"
                    },
                    {
                        "routeId": 1008,
                        "routeName": "肥西4路"
                    },
                    {
                        "routeId": 1009,
                        "routeName": "怀宁1路"
                    },
                    {
                        "routeId": 1010,
                        "routeName": "怀宁2路"
                    },
                    {
                        "routeId": 1011,
                        "routeName": "怀宁3路"
                    },
                    {
                        "routeId": 1012,
                        "routeName": "寿县2路"
                    },
                    {
                        "routeId": 1108,
                        "routeName": "肥西5路"
                    },
                    {
                        "routeId": 2012,
                        "routeName": "寿县4路"
                    },
                    {
                        "routeId": 2013,
                        "routeName": "寿县3路"
                    },
                    {
                        "routeId": 3015,
                        "routeName": "寿县1路"
                    },
                    {
                        "routeId": 3019,
                        "routeName": "长丰1路"
                    },
                    {
                        "routeId": 3020,
                        "routeName": "长丰2路"
                    },
                    {
                        "routeId": 3021,
                        "routeName": "宿松1路"
                    },
                    {
                        "routeId": 3022,
                        "routeName": "宿松2路"
                    },
                    {
                        "routeId": 3023,
                        "routeName": "宿松3路"
                    },
                    {
                        "routeId": 3024,
                        "routeName": "太湖2路"
                    },
                    {
                        "routeId": 3025,
                        "routeName": "灵璧1路"
                    },
                    {
                        "routeId": 3026,
                        "routeName": "泗县1路"
                    },
                    {
                        "routeId": 3027,
                        "routeName": "太湖1路"
                    },
                    {
                        "routeId": 3030,
                        "routeName": "固镇1路"
                    },
                    {
                        "routeId": 3032,
                        "routeName": "望江1路"
                    },
                    {
                        "routeId": 3033,
                        "routeName": "望江2路"
                    },
                    {
                        "routeId": 3034,
                        "routeName": "望江3路"
                    },
                    {
                        "routeId": 3035,
                        "routeName": "望江4路"
                    },
                    {
                        "routeId": 3036,
                        "routeName": "潜山1路"
                    },
                    {
                        "routeId": 3037,
                        "routeName": "潜山2路"
                    },
                    {
                        "routeId": 3038,
                        "routeName": "潜山3路"
                    },
                    {
                        "routeId": 3039,
                        "routeName": "泗县2路"
                    },
                    {
                        "routeId": 3040,
                        "routeName": "泗县3路"
                    },
                    {
                        "routeId": 3041,
                        "routeName": "太湖1路"
                    },
                    {
                        "routeId": 3042,
                        "routeName": "太湖2路"
                    },
                    {
                        "routeId": 3043,
                        "routeName": "太湖3路"
                    },
                    {
                        "routeId": 3044,
                        "routeName": "固镇2路"
                    },
                    {
                        "routeId": 3045,
                        "routeName": "固镇2路"
                    },
                    {
                        "routeId": 3046,
                        "routeName": "蚌埠1路"
                    },
                    {
                        "routeId": 3047,
                        "routeName": "蚌埠2路"
                    },
                    {
                        "routeId": 3048,
                        "routeName": "蚌埠3路"
                    },
                    {
                        "routeId": 3049,
                        "routeName": "淮南1路"
                    },
                    {
                        "routeId": 3050,
                        "routeName": "淮南2路"
                    },
                    {
                        "routeId": 3051,
                        "routeName": "淮南3路"
                    },
                    {
                        "routeId": 3052,
                        "routeName": "宿州1路"
                    },
                    {
                        "routeId": 3053,
                        "routeName": "宿州2路"
                    },
                    {
                        "routeId": 3054,
                        "routeName": "宿州3路"
                    },
                    {
                        "routeId": 3055,
                        "routeName": "阜阳1路"
                    },
                    {
                        "routeId": 3056,
                        "routeName": "阜阳2路"
                    },
                    {
                        "routeId": 3057,
                        "routeName": "阜阳3路"
                    },
                    {
                        "routeId": 3058,
                        "routeName": "临泉1路"
                    },
                    {
                        "routeId": 3059,
                        "routeName": "临泉2路"
                    },
                    {
                        "routeId": 3060,
                        "routeName": "临泉3路"
                    },
                    {
                        "routeId": 3061,
                        "routeName": "肥东1路"
                    },
                    {
                        "routeId": 3062,
                        "routeName": "肥东2路"
                    },
                    {
                        "routeId": 3063,
                        "routeName": "肥东3路"
                    },
                    {
                        "routeId": 3064,
                        "routeName": "池州1路"
                    },
                    {
                        "routeId": 3065,
                        "routeName": "池州2路"
                    },
                    {
                        "routeId": 3066,
                        "routeName": "池州3路"
                    },
                    {
                        "routeId": 3067,
                        "routeName": "东至1路"
                    },
                    {
                        "routeId": 3068,
                        "routeName": "东至2路"
                    },
                    {
                        "routeId": 3069,
                        "routeName": "东至3路"
                    },
                    {
                        "routeId": 3070,
                        "routeName": "滦平1路"
                    },
                    {
                        "routeId": 3071,
                        "routeName": "滦平2路"
                    },
                    {
                        "routeId": 3072,
                        "routeName": "滦平3路"
                    },
                    {
                        "routeId": 3076,
                        "routeName": "东城1路"
                    },
                    {
                        "routeId": 3077,
                        "routeName": "东城2路"
                    },
                    {
                        "routeId": 3078,
                        "routeName": "东鼎1路"
                    },
                    {
                        "routeId": 3079,
                        "routeName": "东鼎2路"
                    },
                    {
                        "routeId": 3082,
                        "routeName": "1路"
                    },
                    {
                        "routeId": 3084,
                        "routeName": "D101"
                    },
                    {
                        "routeId": 3100,
                        "routeName": "70路"
                    }],
                templateData: [
                    {
                        "busShiftTemplateId": 1132,
                        "createBy": 1010,
                        "createTime": "2020-04-16 00:00:00",
                        "driverCarType": 0,
                        "name": "XXX路模板",
                        "orgId": 1032,
                        "orgName": "东鼎车队",
                        "routeId": 3078,
                        "routeName": "东鼎1路",
                        "templateDetailDTOList": null
                    },
                    {
                        "busShiftTemplateId": 1131,
                        "createBy": 3037,
                        "createTime": "2020-04-12 00:00:00",
                        "driverCarType": 0,
                        "name": "东至1路模板",
                        "orgId": 1025,
                        "orgName": "东至公交",
                        "routeId": 3067,
                        "routeName": "东至1路",
                        "templateDetailDTOList": null
                    }],
                tableData: [
                    {
                        "address": "yla",
                        "batchNo": null,
                        "birthday": "2014-03-14 00:00:00",
                        "brithdayString": "2014-03-14",
                        "codeName": null,
                        "createTime": null,
                        "departId": null,
                        "email": "14@163.com",
                        "homeTel": "114",
                        "mobileTel": "114",
                        "officeTel": "114",
                        "orgId": null,
                        "orgName": "长丰公交",
                        "personCode": "014",
                        "personId": 4254,
                        "personName": "十四",
                        "postalCode": "236600",
                        "sex": "女",
                        "updateTime": null,
                        "workUnit": "安徽省"
                    },
                    {
                        "address": "yla",
                        "batchNo": null,
                        "birthday": "2000-07-07 00:00:00",
                        "brithdayString": "2000-07-07",
                        "codeName": null,
                        "createTime": null,
                        "departId": null,
                        "email": "loach0707@126.com",
                        "homeTel": "911",
                        "mobileTel": "110",
                        "officeTel": "119",
                        "orgId": null,
                        "orgName": "肥东公交",
                        "personCode": "007",
                        "personId": 4253,
                        "personName": "初七",
                        "postalCode": "23600",
                        "sex": "男",
                        "updateTime": null,
                        "workUnit": "yla"
                    }
                ],
                date: '',
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                end.setTime(start.getTime() + 3600 * 1000 * 24 * 4);
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                end.setTime(start.getTime() + 3600 * 1000 * 24 * 15);
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                end.setTime(start.getTime() + 3600 * 1000 * 24 * 45);
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 45);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                },
                editSelect1: true,
                editSelect2: true,
                stopFlag: '',
                planFlag: '',
                time: '05:30',
                shiftType: '早班',
                tableSelection: [],
            }
        },
        methods: {
            // 当分组或线路下拉框发生改变触发的函数
            groupChange(val) {
                if (val.length) {

                } else {
                    this.getRouteTreeFn()
                }
                this.line = ''
            },
            getXXXFn() {
                this.loading = true;
                getXXX({
                    pageNum: this.pages.page,
                    personName: this.name,
                    personId: this.id,
                    sex: this.sex,
                    orgName: this.group
                }).then(res => {
                    this.tableData = res.data.list;
                    this.pages.total = res.data.count;
                }).finally(() => {
                    this.loading = false;
                });
            },
            editXXX() {

            },
            editBtn(row) {
                console.log(row)
            },
            delBtn(row) {
                console.log(row)
            },
            handleSelectionChange(val) {
                this.tableSelection = val;
                console.log(this.tableSelection)
            },
            //双击row函数
            choseRow(row) {
                if (row) {
                    this.$refs.myTable.toggleRowSelection(row);
                }
            },
            // 分页查询
            pageChange(val) {
                this.pages.page = val
                this.selectTemplateFn()
            },
        }
    }
</script>

<style scoped>

</style>
